<template>
	<view style="padding: 5%;">
		<uni-forms ref="formData" :modelValue="formData" label-width="120">
			<uni-forms-item label="铜垛条码">
				<uni-easyinput type="text" maxlength="25" :focus="focus" @input="onKeyInput" v-model="formData.barcode"
					placeholder="请扫描铜垛条码" ref='midInput' />
			</uni-forms-item>
		</uni-forms>
		<uni-list>
			<!-- to 属性携带参数跳转详情页面，当前只为参考 -->
			<uni-list-item direction="column" v-for="item in listData" :key="item.container_barcode">
				<!-- 通过header插槽定义列表的标题 -->
				<template v-slot:header>
					<view class="uni-title">唯一值：{{item.container_barcode}}
						<uni-icons type="trash" size="22" style="position: absolute;right: 5%;"
							@click="deleteList(item.container_barcode)">
						</uni-icons>
					</view>


				</template>
				<!-- 通过body插槽定义列表内容显示 -->
				<template v-slot:body>
					<view class="uni-list-box">
						<view class="uni-content">
							<view class="uni-title-sub uni-ellipsis-2">铜垛条码：{{item.container_sn}}</view>
							<view class="uni-note">批次号：{{item.container_batch + ' 重量：'+item.container_qty}}</view>
						</view>
					</view>
				</template>
			</uni-list-item>
		</uni-list>
		<button @click="submit" type="primary" size="default" style="margin-top: 2%;">入库确认</button>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					outID: "",
					barcode: '',
				},
				focus: true,
				listData: [],
				barcodes: []
			}
		},
		onLoad(res) {
			// this.formData.status=res.status
			this.formData.outID = res.outID
		},
		methods: {
			submit() {
				// this.$u.post('/api/Dt_container_plane/InboundTaskCompleted', {
				// 	MainData:{
				// 		barcode:this.barcodes[0]
				// 	}
				// }).then(resdt => {
				// 	if (resdt.status) {
				let that = this;
				uni.request({
					url: 'http://192.168.5.230:8098/api/WCS/SetPLCCompleted',
					data: {
						MainData: {
							barcode: this.barcodes[0]
						}
					},
					method: "POST",
					success(res) {
						debugger;
						if (res.data.status) {
							debugger;
							uni.$showMsg('数据添加成功!')
							that.formData.barcode = "";
							that.listData = [];
							that.barcodes = [];
						}
					}
				})
				// 	} else {
				// 		this.$refs.uToast.show({
				// 			title: err.message,
				// 			type: "error"
				// 		})
				// 	}
				// }).catch(err => {
				// 	this.$refs.uToast.show({
				// 		title: err.message,
				// 		type: "error"
				// 	})
				// })
			},
			onKeyInput: function(event) {
				if (event.length == 25) {
					if (this.listData.length > 0) {
						this.$refs.uToast.show({
							title: "入库只能扫描一个铜垛",
							type: "error"
						})
						return
					}
					let mydata = [{
						container_barcode: "20" + event.substr(7, 6) + "-" + event.substr(14, 3) + "" + event
							.substr(17, 3) + "" + event.substr(5, 2) + "",
						container_sn: event,
						container_batch: "20" + event.substr(7, 2) + "-" + event.substr(14, 3) + "",
						container_qty: "" + event.substr(20, 4) + "." + event.substr(24) + ""
					}]
					// this.listData.push(data)
					this.listData = [...this.listData, ...mydata]
					// debugger;
					// this.focus=false;
					this.formData.barcode = "";
					this.barcodes.push(event);
				}
			},
			deleteList(res) {
				// var obj = arr.find(function(obj) {
				// 	return obj.id === 2020
				// })
				// var i = function getIndexInArr(this.formData, obj) {
				// 	var len = this.formData.length;
				// 	for (var i = 0; i < len; i++) {
				// 		if (isObjectValueEqual(_arr[i], _obj)) {
				// 			return i;
				// 		}
				// 	}
				// 	return -1;
				// };

				this.listData.map((item, index) => {
					if (item.container_barcode == res) {
						this.listData.splice(index, 1);
					}
				})
				this.barcodes.map((item, index) => {
					let container_barcode = "20" + item.substr(7, 6) + "-" + item.substr(14, 3) + "" + item
						.substr(17, 3) + "" + item.substr(5, 2) + ""
					if (container_barcode == res) {
						this.barcodes.splice(index, 1);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-ui.scss';

	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
		min-height: 100%;
		height: auto;
	}

	.tips {
		color: #67c23a;
		font-size: 14px;
		line-height: 40px;
		text-align: center;
		background-color: #f0f9eb;
		height: 0;
		opacity: 0;
		transform: translateY(-100%);
		transition: all 0.3s;
	}

	.tips-ani {
		transform: translateY(0);
		height: 40px;
		opacity: 1;
	}

	.content {
		width: 100%;
		display: flex;
	}

	.list-picture {
		width: 100%;
		height: 145px;
	}

	.thumb-image {
		width: 100%;
		height: 100%;
	}

	.ellipsis {
		display: flex;
		overflow: hidden;
	}

	.uni-ellipsis-1 {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.uni-ellipsis-2 {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
</style>
